import React from 'react';
import {Link} from 'dva/router';
import {NavBar, Icon, Carousel, Grid, Flex, WhiteSpace} from 'antd-mobile';
import {CategoryCardOne} from "../components/faxian/CategoryCardOne";
import {CategoryCardTwo} from "../components/faxian/CategoryCardTwo";
// import {ShouYiPage} from "./ShouYiPage";
import './FaXianPage.css';
import CustomTabs from '../components/faxian/CustomTabs';
import {ZhongHeList} from "../components/faxian/ZhongHeList";
import {NvZhuangList} from "../components/faxian/NvZhuangList";
import {TianMaoList} from "../components/faxian/TianMaoList";


// const PlaceHolder = ({className = '', ...restProps}) => (
//   <div className={`${className} placeholder`} {...restProps}>Block</div>
// );

const data = [
  {
    icon: require('../assets/faxian/shoucang.svg'),
    text: `收藏夹`,
    color: 'cornflowerblue',
  },
  {
    icon: require('../assets/faxian/huodong.svg'),
    text: `热门活动`,
    color: 'orange',
  },
  {
    icon: require('../assets/faxian/hongbao.svg'),
    text: `福利红包`,
    color: 'firebrick',
  },
  {
    icon: require('../assets/faxian/add_user.svg'),
    text: `拉新活动`,
    color: 'saddlebrown',
  },
  {
    icon: require('../assets/faxian/zhidao.svg'),
    text: `新手上路`,
    color: 'orange',
  }
]

export class FaXianPage extends React.Component {
  state = {
    carousel: ['xinren', 'bangzhu'],
    imgHeight: 176,
  }

  render() {
    // console.log('123', this.props);
    const {match} = this.props;
    const tabs = [
      {title: '综合', component: ZhongHeList, from: match.url},
      {title: '女装', component: NvZhuangList, from: match.url},
      {title: '天猫国际', component: TianMaoList, from: match.url},
    ];
    return (
      <div>
        <div className={"tab-header"}>
          <NavBar
            mode="light"
            icon={<img src={require('../assets/index/xiaoxi.svg')} width={22} height={22} alt=""/>}
            onLeftClick={() => console.log('onLeftClick')}
            rightContent={[
              <Icon key="0" type="search"/>
            ]}
          >发现</NavBar>
        </div>
        <div style={{width: '100%', height: 45}}></div>
        <Carousel
          autoplay={true}
          infinite={true}
          // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          // afterChange={index => console.log('slide to', index)}
        >
          {this.state.carousel.map(val => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
            >
              <img
                src={require(`../assets/faxian/${val}.png`)}
                alt=""
                style={{width: '100%', verticalAlign: 'top'}}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({imgHeight: 'auto'});
                }}
              />
            </a>
          ))}
        </Carousel>
        <Grid data={data} hasLine={false} columnNum={5}
              renderItem={(el, index) => {
                return (
                  <div className={"am-grid-item-inner-content column-num-5"}>
                    <div className={"grid-icon-bg"}>
                      <img className="am-grid-icon" src={el.icon} style={{backgroundColor: el.color}} alt=""/>
                    </div>
                    <div className="am-grid-text">{el.text}</div>
                  </div>
                )
              }}
        />
        <div style={{padding: 5, backgroundColor: 'white'}}>
          <img src={require('../assets/faxian/guanggao.png')} alt="" width={'100%'} style={{borderRadius: 5}}/>
        </div>
        <WhiteSpace/>
        <Flex>
          <div style={{flex: 1, marginRight: 3}}>
            <Link to={{pathname: "/jrsx", state: {from: `${match.url}`}}}>
              <CategoryCardOne title={"今日上新"} subTitle={"每日新卷优惠先推"}
                               smallPic={require('../assets/faxian/timg.jpg')}
                               bigPic={require('../assets/faxian/longxia.jpg')}></CategoryCardOne>
            </Link>
          </div>
          <div style={{flex: 1}}>
            <Link to={{pathname: "/rykx", state: {from: `${match.url}`}}}>
              <CategoryCardOne title={"日用快消"} subTitle={"好卷不等人"}
                               smallPic={require('../assets/faxian/tuangou.jpg')}
                               bigPic={require('../assets/faxian/kuaixiao.jpg')}></CategoryCardOne>
            </Link>
          </div>
          {/*<div style={{flex: 1}}>*/}
          {/*<CategoryCardTwo title={"拼团"} subTitle={"成团赚更多"}*/}
          {/*pic={require('../assets/faxian/tuangou.jpg')}></CategoryCardTwo>*/}
          {/*</div>*/}
        </Flex>
        <WhiteSpace/>
        <Flex>
          <div style={{flex: 1, marginRight: 3}}>
            <Link to={{pathname: "/rx", state: {from: `${match.url}`}}}>
              <CategoryCardOne title={"热销榜"} subTitle={"聚划算大额好券"}
                               bigPic={require('../assets/faxian/rexiao.jpg')}></CategoryCardOne>
            </Link>
          </div>
          <div style={{flex: 1}}>
            <Link to={{pathname: "/rq", state: {from: `${match.url}`}}}>
              <CategoryCardOne title={"人气榜"} subTitle={"淘宝客热推好货"}
                               bigPic={require('../assets/faxian/renqi.jpg')}></CategoryCardOne>
            </Link>
          </div>
        </Flex>
        <WhiteSpace size={"xs"}/>
        <Flex>
          <div style={{flex: 1, marginRight: 3}}>
            <Link to={{pathname: "/pinpai", state: {from: `${match.url}`}}}>
              <CategoryCardTwo title={"品牌榜"}
                               pic={require('../assets/faxian/pinpai.jpg')}></CategoryCardTwo>
            </Link>
          </div>
          <div style={{flex: 1, marginRight: 3}}>
            <CategoryCardTwo title={"母婴榜"}
                             pic={require('../assets/faxian/muyin.jpg')}></CategoryCardTwo>
          </div>
          <div style={{flex: 1, marginRight: 3}}>
            <CategoryCardTwo title={"高佣榜"}
                             pic={require('../assets/faxian/gaoyong.jpg')}></CategoryCardTwo>
          </div>
          <div style={{flex: 1, marginRight: 3}}>
            <CategoryCardTwo title={"大额券"}
                             pic={require('../assets/faxian/daequan.jpg')}></CategoryCardTwo>
          </div>
        </Flex>
        <WhiteSpace/>
        <div style={{
          backgroundColor: 'white',
          color: 'coral',
          width: '100%',
          height: 45,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          fontSize: 15
        }}>
          <img src={require('../assets/faxian/zhibo.svg')} width={25} height={25} alt=""/>好券直播
        </div>
        <CustomTabs tabs={tabs}/>
        <div style={{width: '100%', height: 50}}></div>
      </div>
    )
  }
}
